<template>
  <!--<div class="layout">-->
  <div>
    <Top></Top>
    <Row class="layout-content">
      <Col :span="spanLeft" class="left-nav-main">
        <Button type="text" @click="toggleClick" class="toggle-btn">
          <Icon type="navicon" size="32"></Icon>
        </Button>
        <left-nav :is-show-text="isShowText"></left-nav>
      </Col>
      <Col :span="spanRight" class="layout-content-main">
        <transition name="fade" mode="out-in" appear>
          <Recommend/>
         <!-- <router-view></router-view>-->
        </transition>
      </Col>
    </Row>

    <Bottom></Bottom>
  </div>
</template>

<script>
  import Top from "@/components/music/Top";
  import LeftNav from "@/components/music/LeftNav";
  import Bottom from "@/components/music/Bottom";
  import Recommend from "@/components/music/FindMusic/Recommend";
    export default {
        name: "musicOnline",
      data(){
          return{
            spanLeft: 5,
            spanRight: 19,
            isShowText: true
          }
      },
       components: {
        Top,
        LeftNav,
        Bottom,
         Recommend
      },
      methods:{
        toggleClick() {
          let self = this;
          if (this.spanLeft === 5) {
            this.spanLeft = 1;
            this.spanRight = 23;
            self.isShowText = false;
          } else {
            this.spanLeft = 5;
            this.spanRight = 19;
            setTimeout(function() {
              self.isShowText = true;
            }, 300);
          }
        }
      }
    }
</script>

<style scoped>
  @import url("../assets/css/app.css");
</style>
